<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
                window.onload = function(){
                    var tr = document.querySelectorAll("tr");
                    tr[0].style.backgroundColor = "#666666";
                    tr[tr.length-1].style.backgroundColor = "#666666";

                    formatColor();
                }

                function formatColor(){
                    var tbody = document.querySelector("tbody");
                    // console.log(tbody.rows); // 获取所有的行 针对表格 
                    for(var i=0;i<tbody.rows.length;i++){
                        tbody.rows[i].style.backgroundColor = i%2==0?"#dddddd":"#bbbbbb";
                    }

                    
                }

                function selectAll(){
                    // 获取所有的复选框 第一个除外 

                    var cbs = document.getElementsByName("cb");
                    cbs.forEach(function(item){
                        item.checked = true;
                    });


                }

                function reverseAll(){
                    var cbs = document.getElementsByName("cb");
                    cbs.forEach(function(item){
                        item.checked = !item.checked;
                    });
                }

                function cancelAll(){
                    var cbs = document.getElementsByName("cb");
                    cbs.forEach(function(item){
                        item.checked = false;
                    });
                }

                function changeAll(obj){
                    var cbs = document.getElementsByName("cb");
                    cbs.forEach(function(item){
                        item.checked = obj.checked;
                    });
                }
		</script>
	</head>
	<body>
		<table align="center" width="70%" border="1" cellpadding="5" cellspacing="0" id="table" >
			<thead>
				<tr>
		            <th width="10%"><input id="first" type="checkbox" onclick="changeAll(this)"></th>
		            <th>标题</th>
		            <th>发件人</th>
		            <th>时间</th>
		        </tr>
			</thead>
			<tbody>
				<tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title1</td>
		            <td>赵一伤</td>
		            <td>2014-6-1</td>
		        </tr>
		        <tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title2</td>
		            <td>田二败</td>
		            <td>2014-5-5</td>
		        </tr>
		        <tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title3</td>
		            <td>孙三毁</td>
		            <td>2014-1-8</td>
		        </tr>
		        <tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title4</td>
		            <td>李四摧</td>
		            <td>2014-1-15</td>
		        </tr>
		        <tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title5</td>
		            <td>周五轮</td>
		            <td>2010-1-2</td>
		        </tr>
				<tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title6</td>
		            <td>吴六破</td>
		            <td>2014-10-2</td>
		        </tr>
				<tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title7</td>
		            <td>郑七灭</td>
		            <td>2014-9-2</td>
		        </tr>
				<tr>
		            <td align="center"><input type="checkbox" name="cb"></td>
		            <td>Title8</td>
		            <td>王八衰</td>
		            <td>2014-11-2</td>
		        </tr>
			</tbody>
			<tfoot>
				<tr>
		        	<th colspan="4">
		        		<input type="button" value="全选" onclick="selectAll()">
						<input type="button" value="反选" onclick="reverseAll()">
		        		<input type="button" value="取消" onclick="cancelAll()">
					</th>
		        </tr>
			</tfoot>
		</table>
	</body>
</html>